<template>
  <div class="">
  <el-card class="box-card" v-loading='loading'>
    <el-input v-model="page.query" placeholder="请输商户名" class="ipt"></el-input>
     <el-button type="primary" class="eatch" @click="addEatch">搜索</el-button>
     <el-button type="primary" @click="addUpdate()">新增</el-button>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column prop="username" label="商户名" > </el-table-column>
      <el-table-column prop="phone" label="手机号" > </el-table-column>
      <el-table-column prop="mailbox" label="邮箱" > </el-table-column>
      <el-table-column prop="shopName" label="商品名称" > </el-table-column>
      <el-table-column prop="textHtml" label="商品描述" > 
        <template v-slot="scoped">
          <span v-html='scoped.row.textHtml'></span>
        </template>
      </el-table-column>
      <el-table-column prop="anyname" label="操作人" > </el-table-column>
      <el-table-column prop="startTime" label="创建时间" > 
        <template v-slot="scoped">
          <span>{{dateFormat(scoped.row.startTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastTime" label="修改时间" >
        <template v-slot="scoped">
          <span>{{dateFormat(scoped.row.lastTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" >
      <template v-slot="scoped">
          <div class="tab-btn">
            <el-button type="primary" size="mini" @click="addUpdate(scoped.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="addRemove(scoped.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
 </el-card>

  <addFrom refs="addForm" @refreshPage='refreshPage' :dialogVisible.sync="dialogVisible" :shopuser="shopuser" :ids = id></addFrom>
    
 
 </div>
</template>

<script>
import { shopList, shopDate, shopRemove } from '@/api/shop'
import { dateFormat } from '@/utils/index'
import addFrom from './components/add-form.vue'
export default {
  
  name: '',
   
  props: {},
   
  components: {
    addFrom
  },
   
  data () {
   return {
     loading:false,
     dialogVisible:false,
     dateFormat,
     tableData:[],
     total:null,
     id:'',
     shopuser:null,
     page:{
       query:'',
       pagenum:1,
       pagesize:10
     }
   }
  },
  
  computed: {},
  
  watch: {},
  created () {
    this.queryList()
  },
  
  methods: {
   async queryList(){
      try {
        this.loading = true
        const {data} = await shopList(this.page)
        if (data.status == '200'){
            this.tableData = data.data
            this.total = data.total
          }
          this.loading = false
      } catch (error) {
      }
    },
        // 每页条数
    handleSizeChange(newsize) {
      this.page.pagesize = newsize;
      this.queryList();
    },
    //页码
    handleCurrentChange(newrent) {
      this.page.pagenum = newrent;
      this.queryList();
    },
    // 搜索
    addEatch(e){
      if(this.page.query!==''){
        this.queryList()
      }
    },

    // 详情/新增
   async addUpdate(row){
      if (row) {
       this.id = row._id;
       try {
       this.loading = true
       const {data} = await shopDate(this.id)
       if (data.status=='200') {
         this.shopuser = data.data
       }
       } catch (error) {
         
       }
      }
      this.dialogVisible=true
      this.loading = false
    },
    refreshPage(){
      this.queryList()
      this.dialogVisible=false
    },
    // 删除接口
   async addRemove(row){
     this.id = row._id;
     const red = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((val) => {
        return val
      })
       if (red !== 'confirm') {
        return this.$message.success('已取消删除')
      }else{
        try {
        const { data } = await shopRemove(this.id)
        if (data.status == '200'){
         // 处理页面数据删除完页面没去上一页问题
         if(this.tableData.length===1){
          this.page.pagenum=this.page.pagenum===1 ? 1 :this.page.pagenum-1 }
          this.queryList()
          this.$message.success(data.message)
          }
         } catch (error) { 
        }
       }
      }
  },
  
  mounted () {},
}
</script> 

<style scoped lang="less">
.ipt{
  width: 200px;
}
.eatch{
  margin:0px 10px
}
.tab-btn{
  display:flex
}
</style>